<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>bilibili-周边商城-商品页</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/shop-detail.css">
</head>
<body>
	<!-- header头部 -->
	<header class='clearfix'>
		<div class='top_nav' id='topNav'>
			<div  class='top_nav_con clearfix'>
				<ul class='left_nav'>
					<li><a href="index.html">主站</a></li>
					<li><a href="paint-friend.html">画友</a></li>
					<li><a href="game.html" target='_blank'>游戏中心</a></li>
					<li><a href="video.html">直播</a></li>
					<li class='onactive'><a href="shop.html">周边</a></li>
				</ul>
				
				<ul class='right_nav'>
					<li><a href="###">我的订单</a></li>
					<li class='cart'><a href="cart.html" target='_blank'>购物车</a></li>
				</ul>

				<div class="user">
					<a href="###"  class='user_img'></a>
					<div class="info_box" id='infoBox'>
						<div class="user_info">
							<div class="info_top">
								<p class='username'>Tracy_腾</p>
								<p class='userdefaure clearfix'>
									<span class='de_l'>
										<a href="###" title='硬币'><b>34</b></a>
										<a href="###" title='B币'><b>0</b></a>
									</span>
									<span class='de_r'>
										<a href="###" class='e_link'><span class='email'>前去绑定邮箱</span><i class='email_i'><em class='email_em'></em></i></a>
										<a href="###" class='p_link'><span class='phone'>前去绑定手机</span><i><em></em></i></a>
									</span>
								</p>
								<p class='userlevel clearfix'>
									<span class='levelbox clearfix'>
										<i>等级</i>
										<a href="###" id='level_link'>
											<em class='level_num'></em>
											<em class='level_line'></em>
										</a>
									</span>
									<span class='ex'><b>0</b>/1500</span>
									<div class="level_info" id='levelInfo'>
										<h2>作为<strong>LV2</strong>, 你可以：</h2>
										<ul>
											<li>1、发射个性弹幕（彩色、高级）</li>
											<li>2、参与视频互动（评论）</li>
											<li>3、投稿成为偶像 </li>
										</ul>
										<p><a href="###">会员等级相关说明 &gt;</a></p>
										<i><em></em></i>
									</div>
								</p>
							</div>
							<div class="info_mid">
								<ul class='clearfix'>
									<li><a href="###">个人中心</a></li>	
									<li><a href="###">投稿管理</a></li>
									<li><a href="###">B币钱包</a></li>	
									<li><a href="###">直播中心</a></li>
								</ul>
							</div>
						</div>
						<div class="user_out"><a href="###">退出</a></div>
					</div>
				</div>
			</div>
		</div>
	</header>

	<!-- 主体内容 -->
	<section class='main_con'>
		<div class='product_preview clearfix' id = 'productPreview'>
			<div class="view_area">
				<div class="big_view clearfix" id='bigView'>
					<div class='big_view_item bg1 active'></div>
					<div class='big_view_item bg2'></div>
					<div class='big_view_item bg3'></div>
					<div class='big_view_item bg4'></div>
					<div class='big_view_item bg5'></div>
					<div class="float_box" id='floatBox'></div>
				</div>
				<div class='small_view clearfix' id='smallView'>
					<ul class='clearfix'>
						<li class='sm1 on'><i class='mask'></i></li>
						<li class='sm2'><i class='mask'></i></li>
						<li class='sm3'><i class='mask'></i></li>
						<li class='sm4'><i class='mask'></i></li>
						<li class='sm5'><i class='mask'></i></li>
					</ul>
				</div>
			</div>
			<div class="price_area">
				<div class='price_title'>
					<h1>【新品】哔哩哔哩周边 小电视多功能电子闹钟</h1>
					<h2><span>价格：</span>￥99.00</h2>
				</div>
				<div class='price_con' id='priceCon'>
					<p class='color'><span>颜色</span><a href="###" class='color_link'>蓝色</a></p>
					<p class='num'>
						<span>数量</span>
						<button class='reduce' disabled>-</button><input type="text" value='1' class='txt_input'><button class='add'>+</button>
						<span class='tip'>库存<b class='lastnum'>14</b>件</span>
					</p>
					<p class='btn'>
						<button class='buynow'>立即购买</button>
						<button class='addcart'>加入购物车</button>
					</p>
				</div>
			</div>
		</div>
		<div class='product_details'>
			<h4>商品详情</h4>
			<div class="pro_img clearfix">
				<img src="img/shop-detail/pro01.jpg">
				<img src="img/shop-detail/pro02.jpg">
				<img src="img/shop-detail/pro03.jpg">
				<img src="img/shop-detail/pro04.jpg">
				<img src="img/shop-detail/pro05.jpg">
				<img src="img/shop-detail/pro06.jpg">
				<img src="img/shop-detail/pro07.jpg">
				<img src="img/shop-detail/pro08.jpg">
				<img src="img/shop-detail/pro09.jpg">
				<img src="img/shop-detail/pro10.jpg">
			</div>
		</div>
	</section>

	<!-- footer底部 -->
	<footer>
		<div class="foot_top clearfix">
		<div class="bilibili">
			<p>bilibili</p>
			<div class="about clearfix">
				<ul>
					<li><a href="###">关于我们</a></li>
					<li><a href="###">联系我们</a></li>
				</ul>
				<ul>
					<li><a href="###">友情链接</a></li>
					<li><a href="###">加入我们</a></li>
				</ul>
				<ul>
					<li><a href="###">哔哩哔哩周边</a></li>
					<li><a href="###">官方认证</a></li>
				</ul>
			</div>
		</div>
		<div class="fast_link">
			<p>传送门</p>
			<div class="about clearfix">
				<ul>
					<li><a href="###">帮助中心</a></li>
					<li><a href="###">侵权申诉</a></li>
					<li><a href="###">用户反馈论坛</a></li>
				</ul>
				<ul>
					<li><a href="###">高级弹幕</a></li>
					<li><a href="###">分院帽计划</a></li>
					<li><a href="###">壁纸站</a></li>
				</ul>
				<ul>
					<li><a href="###">活动专题页</a></li>
					<li><a href="###">活动中心</a></li>
					<li><a href="###">名人堂</a></li>
				</ul>
			</div>
		</div>
		<div class="focus clearfix">
			<a href="###">
				<dl>
					<dt class='focus_pic phone'></dt>
					<dt class='code_pic phone_code'></dt>
					<dd class='focus_pro'>手机端下载 </dd>
				</dl>
			</a>
			<a href="###">
				<dl>
					<dt class='focus_pic sina'></dt>
					<dt class='code_pic sina_code'></dt>
					<dd class='focus_pro'>新浪微博</dd>
				</dl>
			</a>
			<a href="###">
				<dl>
					<dt class='focus_pic official'></dt>
					<dt class='code_pic wechat_code'></dt>
					<dd class='focus_pro'>官方微信</dd>
				</dl>
			</a>
		</div>	 
		</div>
		<div class="foot_bottom clearfix">
		<div class="cooper"><img src="img/index/cooper.png" alt=""></div>
		<div class="foot_info">
			<p>广播电视节目制作经营许可证：（沪）字第1248号 | 网络文化经营许可证：沪网文[2013]0480-056号 | 信息网络传播视听节目许可证：0910417 | 互联网ICP备案：沪ICP备13002172号-3 沪ICP证：沪B2-20100043 | 违法不良信息举报邮箱：help@bilibili.com | 违法不良信息举报电话：4000233233转3</p>
			<p>网上有害信息举报专区： <a href="###">中国互联网违法和不良信息举报中心</a> |  <a href="###">上海互联网举报中心</a> | <a href="###">12318 全国文化市场举报网站</a></p>
		</div>
		</div>
	</footer>

	<!-- 返回顶部 -->
	<div class="top_arrow" id='toTop'></div>

	<script src='js/jquery-3.1.1.min.js'></script>
	<script src='js/shop-detail.js'></script>
</body>
</html>